<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				margin:0;
				padding:0;
			}
			ul {
				list-style:none;
			}
			.fixed-menu {
				position:fixed;
				right:0px;
				top:50%;
				margin-top:-90px;
				width:60px;
				box-shadow:0px 0px 20px rgba(0,0,0,.3);
				z-index:999;
			}
			.fx-ul li {
				position:relative;
				height:60px;
				line-height:60px;
				border-bottom:1px solid #fff;
			}
			.fx-ul li a {
				position:absolute;
				left:0;
				top:0;
				z-index:2;
				color:#fff;
				display:block;
				width:60px;
				height:60px;
				line-height:60px;
				text-align:center;
				-webkit-transition:all 0.6s;
				-ms-transition:all 0.6s;
				-moz-transition:all 0.6s;
				text-decoration:none;
				font-size:24px;
			}
			.title {
				position:absolute;
				left:0px;
				bottom:1px;
				color:#fff;
				width:80px;
				height:40px;
				line-height:40px;
				text-align:center;
				-webkit-transition:all 0.6s;
				-ms-transition:all 0.6s;
				-moz-transition:all 0.6s;
				background-color:#fff;
				box-shadow:0px 0px 10px rgba(0,0,0,.3);
				z-index:1;
				opacity:0;
			}
			.title:before {
				content:'';
				display:block;
				width:10px;
				height:10px;
				position:absolute;
				right:-5px;
				top:14px;
				background-color:#fff;
				transform:rotate(45deg);
			}
			.fx-ul li:hover .title {
				left:-88px;
				opacity:1;
			}
			.fx-ul li.fx-shop a {
				background-image:-webkit-linear-gradient(left,#f60,#ffb443);
				background-image:-moz-linear-gradient(left,#f60,#ffb443);
				background-image:-ms-linear-gradient(left,#f60,#ffb443);
			}
			.fx-ul li.fx-shop .title {
				background-color:#f60;
			}
			.fx-ul li.fx-shop .title:before {
				background-color:#f60;
			}
			.fx-ul li.fx-contact a {
				background-image:-webkit-linear-gradient(left,#00b7ee,#55d8ff);
				background-image:-moz-linear-gradient(left,#00b7ee,#55d8ff);
				background-image:-ms-linear-gradient(left,#00b7ee,#55d8ff);
			}
			.fx-ul li.fx-contact .title {
				background-color:#00b7ee;
			}
			.fx-ul li.fx-contact .title:before {
				background-color:#00b7ee;
			}
			.fx-ul li.fx-top a {
				background-image:-webkit-linear-gradient(left,#333,#666);
				background-image:-moz-linear-gradient(left,#333,#666);
				background-image:-ms-linear-gradient(left,#333,#666);
			}
			.fx-ul li.fx-top .title {
				background-color:#333;
			}
			.fx-ul li.fx-top .title:before {
				background-color:#333;
			}


		</style>
	</head>
	<body>
		<!--鼠标移动到右边方框看效果--> 
		<div class="fixed-menu">
		    <ul class="fx-ul">
		        <li class="fx-shop">
		            <a class="iconfont" href="#" target="_blank"></a>
		            <div class="title">文字</div>
		        </li>
		        <li class="fx-contact">
		            <a class="iconfont" href="#" target="_blank"></a>
		            <div class="title">文字</div>
		        </li>
		        <li class="fx-top">
		            <a class="iconfont" href="#"></a>
		            <div class="title">回到顶部</div>
		        </li>
		    </ul>
		</div>
	</body>
</html>
